import { Tabs } from 'nextra/components';
import { Callout } from "nextra/components";
import { Widget } from '@/components/demo/widget.tsx';
import LinkBadge from '@/components/ui/link-badge/link-badge.tsx';
import LinkBadgeGroup from '@/components/ui/link-badge/link-badge-group.tsx';

# Line Calendar

A compact calendar component that displays dates in a horizontally scrollable line, ideal for date selection in limited space.

<LinkBadgeGroup>
  <LinkBadge label="API Reference" href="https://pub.dev/documentation/forui/latest/forui.widgets.line_calendar/"/>
</LinkBadgeGroup>

<Callout type="info">
  Hold `Shift` while scrolling to navigate through dates on desktop and web.
</Callout>

<Tabs items={['Preview', 'Code']}>
    <Tabs.Tab>
        <Widget name='line-calendar' query={{}} height={200}/>
    </Tabs.Tab>
    <Tabs.Tab>
        ```dart copy
        FLineCalendar(initialSelection: DateTime.now().subtract(const Duration(days: 1)));
        ```
    </Tabs.Tab>
</Tabs>

## CLI

To generate and customize this style:

```shell copy
dart run forui style create line-calendar
```

## Usage

### `FLineCalendar(...)`

```dart copy
FLineCalendar(
  controller: FCalendarController.date(),
  style: FLineCalendarStyle(...),
  initialScrollAlignment: AlignmentDirectional.center,
  physics: const AlwaysScrollableScrollPhysics(),
  cacheExtent: 100,
  keyboardDismissBehavior: ScrollViewKeyboardDismissBehavior.onDrag,
  builder: (context, data, child) => child!,
  onChange: (date) => print('Selected date: $date'),
  toggleable: true,
  start: DateTime(1900),
  end: DateTime(2050),
  initialScroll: DateTime.now(),
  initialSelection: DateTime.now(),
  today: DateTime.now(),
);
```
